<script lang="ts" setup>

import { onMounted, reactive } from 'vue'
import { usePopWinProvide } from '../../../../common/hooks/FormHooks'
import { forceExitApi, queryOnlineListApi } from '../../../../common/service/api/onLineApi'
import { dateFormatStr, dateTimeFormatStr, popAskWin } from '../../../../common/utils/normalUtils'
import { sendServiceData } from '../../../../common/service'
import { hasPermission } from '../../../../common/manager/PermissionManager'
import { dateColumnFormat } from '../../../../common/hooks/PageViewHooks'

const state:any = reactive({
  isLoading: false,
  search: {
    ipaddr: '',
    userName: undefined
  }
})

/**
 *
 */
const { actions, pageData, pageActions } = usePopWinProvide({
  queryMethod: queryOnlineListApi,
  search: state.search,
  pageOptions: { autoIndex: true },
  page: true
})

/**
 * 强制退出
 * @param data
 */
const exitHandler = (data:any) => {
  popAskWin('是否确认强退名称为"' + data.userName + '"的数据项?', async () => {
    await sendServiceData(forceExitApi, data, state)
    postMessage('操作成功！')
    pageActions.reQuery()
  })
}

/**
 * 初始化
 */
onMounted(() => {
  actions.queryList()
})
</script>

<template>
  <v-page-list :loading="pageData.isLoading||state.isLoading"
               :page-data="pageData"
               @query="actions.queryList()"
               @page-query="pageActions.pageChange()">
    <template #search>
      <v-search-item>
        <v-search-input v-model="state.search.ipaddr"
                        class="data-search"
                        placeholder="请输入IP地址"
                        normal
                        @enter="actions.queryList()" />
      </v-search-item>

      <v-search-item>
        <v-search-input v-model="state.search.name"
                        class="data-search"
                        placeholder="请输入用户名称"
                        normal
                        @enter="actions.queryList()" />
      </v-search-item>
      <v-button type="primary"
                icon="chaxun"
                @click="actions.queryList()">
        查询
      </v-button>
    </template>

    <el-table :data="pageData.dataSource"
              height="100%"
              style="width:100%;height:100%;"
              border
              stripe
              size="small">
      <el-table-column prop="$index"
                       label="序号"
                       width="50"
                       align="center" />
      <el-table-column label="用户名称"
                       prop="userName"
                       show-overflow-tooltip />
      <el-table-column label="部门名称" show-overflow-tooltip prop="deptName" />
      <el-table-column label="IP地址"
                       show-overflow-tooltip
                       prop="ipaddr" />
      <el-table-column label="IP属性"
                       show-overflow-tooltip
                       prop="loginLocation" />
      <el-table-column label="浏览器" show-overflow-tooltip prop="browser" />
      <el-table-column label="操作系统" show-overflow-tooltip prop="os" />
      <el-table-column label="登录时间"
                       show-overflow-tooltip
                       prop="loginTime"
                       :formatter="dateColumnFormat"
                       width="180" />
      <el-table-column prop="opt"
                       label="操作"
                       fixed="right"
                       align="center"
                       width="150">
        <template #default="{row}">
          <v-column-control>
            <v-table-icon icon="shanchu"
                          title="强制退出"
                          class="icon-btn-tb"
                          @click="exitHandler(row)" />
          </v-column-control>
        </template>
      </el-table-column>
    </el-table>
  </v-page-list>
</template>

<style scoped lang="scss">

</style>
